<template>
  <view class="number-pad" v-if="visible">
    <view class="number-pad__mask" @click="handleClose"></view>
    <view class="number-pad__container">
      <!-- Title and close button -->
      <view class="number-pad__header">
        <text class="number-pad__title">{{ title }}</text>
        <view class="number-pad__close" @click="handleClose">x</view>
      </view>
      
      <!-- Value display -->
      <view class="number-pad__value-container">
        <view class="number-pad__value">{{ value }}</view>
        <view class="number-pad__unit">{{ unit }}</view>
      </view>
      
      <!-- Unit selector -->
      <view class="number-pad__unit-selector">
        <view 
          v-for="(item, index) in units" 
          :key="index"
          :class="['number-pad__unit-item', { 'number-pad__unit-item--active': item === unit }]"
          @click="handleUnitChange(item)"
        >
          {{ item }}
        </view>
      </view>
      
      <!-- Hint text -->
      <view class="number-pad__hint" v-if="hint">
        <text class="number-pad__hint-icon">ⓘ</text>
        <text class="number-pad__hint-text">{{ hint }}</text>
      </view>
      
      <!-- Number buttons -->
      <view class="number-pad__keyboard">
        <view class="number-pad__row">
          <view class="number-pad__key" @click="handleInput('1')">1</view>
          <view class="number-pad__key" @click="handleInput('2')">2</view>
          <view class="number-pad__key" @click="handleInput('3')">3</view>
        </view>
        <view class="number-pad__row">
          <view class="number-pad__key" @click="handleInput('4')">4</view>
          <view class="number-pad__key" @click="handleInput('5')">5</view>
          <view class="number-pad__key" @click="handleInput('6')">6</view>
        </view>
        <view class="number-pad__row">
          <view class="number-pad__key" @click="handleInput('7')">7</view>
          <view class="number-pad__key" @click="handleInput('8')">8</view>
          <view class="number-pad__key" @click="handleInput('9')">9</view>
        </view>
        <view class="number-pad__row">
          <view class="number-pad__key" @click="handleInput('.')">.</view>
          <view class="number-pad__key" @click="handleInput('0')">0</view>
          <view class="number-pad__key number-pad__key--delete" @click="handleDelete">⌫</view>
        </view>
      </view>
      
      <!-- Confirm button -->
      <view class="number-pad__confirm" @click="handleConfirm">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NumberPad',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    initialValue: {
      type: [String, Number],
      default: '0'
    },
    units: {
      type: Array,
      default: () => ['克', '碗', '份']
    },
    defaultUnit: {
      type: String,
      default: '克'
    },
    hint: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: '0',
      unit: this.defaultUnit
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.value = this.initialValue.toString();
        this.unit = this.defaultUnit;
      }
    }
  },
  methods: {
    handleInput(key) {
      // Handle decimal point
      if (key === '.' && this.value.includes('.')) {
        return;
      }
      
      // Handle first digit input
      if (this.value === '0' && key !== '.') {
        this.value = key;
        return;
      }
      
      // Append digit
      this.value += key;
    },
    handleDelete() {
      if (this.value.length <= 1) {
        this.value = '0';
      } else {
        this.value = this.value.slice(0, -1);
      }
    },
    handleUnitChange(unit) {
      this.unit = unit;
    },
    handleConfirm() {
      this.$emit('confirm', {
        value: parseFloat(this.value),
        unit: this.unit
      });
      this.handleClose();
    },
    handleClose() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style lang="scss" scoped>
.number-pad {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  
  &__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  &__container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    box-sizing: border-box;
  }
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  &__title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  &__close {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #999;
  }
  
  &__value-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 30rpx;
  }
  
  &__value {
    font-size: 60rpx;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  &__unit {
    font-size: 32rpx;
    color: #333;
  }
  
  &__unit-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #f5f5f5;
    width: 300rpx;
    margin: 0 auto 30rpx;
  }
  
  &__unit-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    color: #666;
    
    &--active {
      background-color: #00c2b3;
      color: #fff;
    }
  }
  
  &__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    font-size: 24rpx;
    color: #999;
  }
  
  &__hint-icon {
    margin-right: 6rpx;
  }
  
  &__keyboard {
    margin-bottom: 30rpx;
  }
  
  &__row {
    display: flex;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  &__key {
    flex: 1;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    margin-right: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    
    &:last-child {
      margin-right: 0;
    }
    
    &--delete {
      font-size: 32rpx;
    }
  }
  
  &__confirm {
    height: 90rpx;
    background-color: #00c2b3;
    color: #fff;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
